import { Divider, List, ListItem, Stack, Typography } from '@mui/material';
import { useTheme } from '@mui/material/styles';

import CVSSBadge from '../../../../components/CvssBadge';
import { useFormatter } from '../../../../components/i18n';
import type { CveOutput, CweOutput } from '../../../../utils/api-types';
import { emptyFilled } from '../../../../utils/String';

interface Props { cve: CveOutput }

const GeneralVulnerabilityInfoTab = ({ cve }: Props) => {
  const { fldt, t } = useFormatter();
  const theme = useTheme();

  return (
    <div style={{ padding: theme.spacing(2, 1, 0, 0) }}>
      {/* CVE Id */}
      <Typography variant="subtitle2" gutterBottom>
        {emptyFilled(cve?.cve_external_id)}
      </Typography>

      {/* Description */}
      <Typography variant="subtitle1" fontWeight="bold" gutterBottom>
        {t('Description')}
      </Typography>
      <Typography variant="body2">
        {emptyFilled(cve?.cve_description)}
      </Typography>
      <Divider sx={{ my: theme.spacing(2) }} />

      {/* Quick Info */}
      <Typography variant="subtitle1" fontWeight="bold" gutterBottom>
        {t('Quick Info')}
      </Typography>
      <Stack spacing={1}>
        <Typography variant="body2">
          <strong>{`${t('Published')}: `}</strong>
          {fldt(cve?.cve_published)}
        </Typography>
        <Typography variant="body2">
          <strong>{`${t('Source')}: `}</strong>
          {emptyFilled(cve?.cve_source_identifier)}
        </Typography>
      </Stack>
      <Divider sx={{ my: theme.spacing(2) }} />

      {/* Metrics */}
      <Typography variant="subtitle1" fontWeight="bold" gutterBottom>
        {t('Metrics')}
      </Typography>
      {cve?.cve_cvss && <CVSSBadge score={cve?.cve_cvss} />}
      <Divider sx={{ my: theme.spacing(2) }} />

      {/* References */}
      <Typography variant="subtitle1" fontWeight="bold" gutterBottom>
        {t('References to Advisories, Solutions, and Tools')}
      </Typography>
      <List dense>
        {cve?.cve_reference_urls?.length ? (
          cve.cve_reference_urls.map((url, index) => (
            <ListItem key={index}>
              <a href={url} target="_blank" rel="noopener noreferrer">
                {url}
              </a>
            </ListItem>
          ))
        ) : (
          <ListItem>{t('No references available.')}</ListItem>
        )}
      </List>
      <Divider sx={{ my: theme.spacing(2) }} />

      {/* CISA */}
      <Typography variant="subtitle1" fontWeight="bold" gutterBottom>
        {t('CISA\'s Known Exploited Vulnerabilities Catalog')}
      </Typography>
      <Stack spacing={1}>
        <Typography variant="body2">
          <strong>{`${t('Vulnerability Name')}: `}</strong>
          {emptyFilled(cve?.cve_cisa_vulnerability_name)}
        </Typography>
        <Typography variant="body2">
          <strong>{`${t('Date Added')}: `}</strong>
          {fldt(cve?.cve_cisa_exploit_add)}
        </Typography>
        <Typography variant="body2">
          <strong>{`${t('Due Date')}: `}</strong>
          {fldt(cve?.cve_cisa_action_due)}
        </Typography>
        <Typography variant="body2">
          <strong>{`${t('Required Action')}: `}</strong>
          {emptyFilled(cve?.cve_cisa_required_action)}
        </Typography>
      </Stack>
      <Divider sx={{ my: theme.spacing(2) }} />

      {/* CWE */}
      <Typography variant="subtitle1" fontWeight="bold" gutterBottom>
        {t('Weakness Enumeration')}
      </Typography>
      <Stack spacing={1}>
        {cve?.cve_cwes?.length ? (
          cve.cve_cwes.map((cwe: CweOutput) => (
            <Typography key={cwe.cwe_external_id} variant="body2">
              {cwe.cwe_external_id}
            </Typography>
          ))
        ) : (
          <Typography variant="body2">{t('No CWEs listed.')}</Typography>
        )}
      </Stack>
    </div>
  );
};

export default GeneralVulnerabilityInfoTab;
